<template>
  <!-- 核心企业贷款申请 -->
  <div class="preloanA">
    <!-- 顶部核心企业贷款申请 -->
    <div class="neirong">
      <div class="hander">
        <!-- <el-button size="large" type="primary" round>核心企业贷款申请</el-button> -->
      </div>

      <!-- 底部内容区域 -->
      <div class="footer">
        <!-- 底部内容区域上方输入框 -->
        <div class="top">
          <div class="menu">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="企业名称"
              border="none"
              size="large"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 输入框 -->
          <div class="topIndex">
            <el-input
              v-model="input4"
              class="w-50 m-2"
              placeholder="请输入要查询的核心企业名称"
              size="large"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </div>
          <!-- 下拉菜单 -->
          <div class="menu">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="状态"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="btns">
            <div class="left">
              <el-button type="primary" class="button1">查询</el-button>
              <el-button type="primary" plain class="button">重制</el-button>
            </div>
          </div>
        </div>

        <!-- 底部内容区域中间内容 -->
        <div class="main">
          <el-table class="table" :data="bannerList" stripe style="width: 100%">
            <el-table-column prop="" label="序号">
              <template #default="scope">
                <span>{{ scope.$index+1 }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="企业名称">
              <template #default="{ row }">
                <span> {{ row.htBusinessname }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="社会信用代码">
              <template  #default="{ row }">
                <span>{{ row.htSocialcreditid }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="注册资本">
              <template #default="{ row }">
                <span>{{ row.htRegisteredmoney }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="业务员">
              <template #default="{ row }">
                <span>{{ row.htSalesman }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="流程状态">
              <template #default="{ row }">
                <span>{{ row.htProcessstatus }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="任务开始时间">
              <template  #default="{ row }">
                <span>{{ row.htSignndate }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template>
                <span> </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 底部内容区域尾部页码 -->
        <div class="bottom">
          <el-pagination
            :page-sizes="[2, 4, 6, 8]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import service from "@/apis";
const value = ref("");

const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "待审批",
    label: "待审批",
  },
  {
    value: "已审批",
    label: "已审批",
  },
];
const options1 = [
  {
    value: "企业名称",
    label: "企业名称",
  },
  {
    value: "社会信用代码",
    label: "社会信用代码",
  },
];

// 基本信息
var bannerList = ref([]);
onMounted(async () => {
  var res = await service.tables.daikuanxinxi();
  if (res.data.data) {
    res.data.data.forEach((item) => {
      item.lading = false;
    });
    bannerList.value = res.data.data;
  }
  console.log(res.data);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.footer {
  width: 1300px;
  height: 620px;
  background-color: #fafafa;
}
.topInput {
  width: 240px;
}
.top {
  padding: 20px 0;
  margin: 0 24px;
  display: flex;
}
.footer .top .menu {
  width: 170px;
  padding: 0 20px;
}
.footer .top .btns button {
  width: 80px;
  height: 38px;
}
.footer .top .btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/*  */
.main .table {
  width: 1300px;
  display: flex;
  justify-content: space-around;
}
.footer {
  position: relative;
}
.bottom {
  position: absolute;
  left: 400px;
  bottom: 35px;
}
.btns .button1 .button3 {
  width: 50px;
}


</style>
